<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>舌象分析系统</title>
    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
    <!-- 添加网页图标 -->
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <!-- 添加 iOS 支持 -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="theme-color" content="#1a2a6c">
</head>
<body>
    <div id="global-progress" class="global-progress"></div>

    <div class="page-header">
        <div class="header-logo">
            <img src="/favicon.svg" alt="Logo"> AI 舌象采集系统
        </div>
        <div class="header-actions">
            <a href="https://gitee.com/dhamma/tongue_web" target="_blank" class="header-action-item gitee-link">
                <span class="gitee-icon">
                    <svg viewBox="0 0 1024 1024" width="16" height="16">
                        <path d="M512 1024C229.222 1024 0 794.778 0 512S229.222 0 512 0s512 229.222 512 512-229.222 512-512 512z m259.149-568.883h-290.74a25.293 25.293 0 0 0-25.292 25.293l-0.026 63.206c0 13.952 11.315 25.293 25.267 25.293h177.024c13.978 0 25.293 11.315 25.293 25.267v12.646a75.853 75.853 0 0 1-75.853 75.853h-240.23a25.293 25.293 0 0 1-25.267-25.293V417.203a75.853 75.853 0 0 1 75.827-75.853h353.946a25.293 25.293 0 0 0 25.267-25.292l0.077-63.207a25.293 25.293 0 0 0-25.268-25.293H417.152a189.62 189.62 0 0 0-189.62 189.645V771.15c0 13.977 11.316 25.293 25.294 25.293h372.94a170.65 170.65 0 0 0 170.65-170.65V480.384a25.293 25.293 0 0 0-25.293-25.267z" fill="#C71D23"></path>
                    </svg>
                </span>
                gitee地址
            </a>
        </div>
    </div>

    <div class="floating-element"></div>
    <div class="floating-element"></div>
    <div class="floating-element"></div>
    
    <div class="upload-container">
        <div class="digital-dots"></div>
        <div class="tech-circles top-right"></div>
        <div class="tech-circles bottom-left"></div>
        <div class="tech-line top-left"></div>
        <div class="tech-line bottom-right"></div>
        
        
        
        <div class="content-container">
            <div class="upload-header">舌象采集系统</div>
            <div class="upload-area" id="dropArea">
                <div class="button-group">
                    <button class="upload-btn" id="selectFile">选择图片</button>
                    <button class="upload-btn" id="toggleCamera">打开摄像头</button>
                    <button class="upload-btn" id="captureNative">使用手机相册</button>
                    <button class="upload-btn" id="exampleImageBtn">使用示例图片</button>
                </div>
                
                <div class="upload-tips-content" id="tipsContent">
                    <div class="upload-text">拖拽图片到此处或点击上方按钮上传或拍照 (仅支持JPG/PNG格式)</div>
                </div>
                
                <canvas id="canvas"></canvas>
                
                <input type="file" id="fileInput" style="display: none;" accept=".jpg,.jpeg,.png">
                <input type="file" id="nativeCamera" accept="image/*" capture="camera" style="display: none;">
            </div>
            
            <div class="visualization-container" id="visualizationContainer">
                <div class="visualization-header">
                    <h3>🔍 舌象分析</h3>
                </div>
                <div class="visualization-content">
                    <div class="selected-image">
                        <div class="no-image-placeholder">
                            <div class="placeholder-icon">📷</div>
                            <div class="placeholder-text">请选择一张图片进行分析</div>
                        </div>
                        <img id="selectedImage" style="display: none;">
                        <div class="video-container" style="display: none;">
                            <video id="video" autoplay playsinline></video>
                            <button id="shutterBtn" class="shutter-btn">
                                <div class="shutter-inner"></div>
                            </button>
                            
                            <div id="photoConfirmControls" class="photo-confirm-controls" style="display: none;">
                                <button id="retakePhotoBtn" class="control-btn retake-btn">
                                    <span>重拍一张</span>
                                </button>
                                <button id="confirmPhotoBtn" class="control-btn confirm-btn">
                                    <span>上传分析</span>
                                </button>
                                <button id="backPhotoBtn" class="control-btn confirm-btn">
                                    <span>返回</span>
                                </button>
                            </div>
                            
                            <!-- <button id="exampleImageBtn" class="example-image-btn">使用示例图片分析</button> -->
                            <div id="flashEffect" class="flash-effect"></div>
                        </div>
                    </div>
                    <div class="probability-container">
                        <div class="probability-item">
                            <div class="probability-label">舌色</div>
                            <div class="probability-bar-container">
                                <div class="probability-bar" style="width: 0%"></div>
                                <div class="probability-value">0%</div>
                            </div>
                        </div>
                        <div class="probability-item">
                            <div class="probability-label">舌形</div>
                            <div class="probability-bar-container">
                                <div class="probability-bar" style="width: 0%"></div>
                                <div class="probability-value">0%</div>
                            </div>
                        </div>
                        <div class="probability-item">
                            <div class="probability-label">舌质</div>
                            <div class="probability-bar-container">
                                <div class="probability-bar" style="width: 0%"></div>
                                <div class="probability-value">0%</div>
                            </div>
                        </div>
                        <div class="probability-item">
                            <div class="probability-label">苔质</div>
                            <div class="probability-bar-container">
                                <div class="probability-bar" style="width: 0%"></div>
                                <div class="probability-value">0%</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>

    <!-- 示例图片抽屉 -->
    <div id="exampleDrawer" class="example-drawer">
        <div class="drawer-header">
          <h3>选择示例图片</h3>
          <button id="closeDrawerBtn" class="close-drawer-btn">&times;</button>
        </div>
        <div class="example-images-container">
          <div class="example-image-item" data-image="assets/examples/example-1.png">
            <img src="assets/examples/example-1.png" alt="示例图片1">
            <div class="example-image-label">示例1: 舌色偏黄</div>
          </div>
          <div class="example-image-item" data-image="assets/examples/example-2.png">
            <img src="assets/examples/example-2.png" alt="示例图片2">
            <div class="example-image-label">示例2: 舌色偏白</div>
          </div>
          <div class="example-image-item" data-image="assets/examples/example-3.png">
            <img src="assets/examples/example-3.png" alt="示例图片3">
            <div class="example-image-label">示例3: 舌质薄白</div>
          </div>
          <div class="example-image-item" data-image="assets/examples/example-4.png">
            <img src="assets/examples/example-4.png" alt="示例图片4">
            <div class="example-image-label">示例4: 舌苔厚腻</div>
          </div>
        </div>
      </div>
    
    <script type="module" src="/src/app.js"></script>
</body>
</html>
